<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
   
		<!-- ztree -->
		<link rel="stylesheet" th:href="@{/asserts/js/plugins/ztree/css/metroStyle/metroStyle.css}" type="text/css">

		<div class="container-div">
			<div class="animated fadeIn">
				<div class="row">
					<div>
						<div class="card col-lg-3 tree-card" style="float: left; margin-right: 0% ; overflow-x: hidden; overflow-y: scroll;">
							 <!-- 
						 	  <div class="card-body">
			                   		<ul id="treeDemo" class="ztree"></ul>	
			                  </div>
						 	   -->
			                  
			                  <div class="box box-main  search-collapse">
									<div class="box-header">
										<div class="box-title">
											<i class="fa icon-grid"></i> 应用列表
										</div>
										<div class="box-tools pull-right">
											<!-- 
											<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
											<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
											-->
											
											<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新应用"><i class="fa fa-refresh"></i></button>
										</div>
									</div>
									<div class="ui-layout-content">
										<ul id="treeDemo" class="ztree"></ul>	
									</div>
								</div>
					
						</div>

						<div class="col-lg-9" style="float: left;">
							<div class="col-sm-12 search-collapse">
								<form id="operlog-form">
								
									<input type="hidden" id="applicationId" name="condition[applicationId]"  />
									<input type="hidden" id="resourceParent" name="condition[resourceParent]"  />
										
									<div class="select-list">
										<ul>
											<li>
												<label>所属应用 </label> 
												<input id="text-input" type="text" onclick="showApplication()" name="applicationIdLabel" readonly="readonly" style="cursor: pointer" placeholder="所属应用">
											</li>
											<li>
												<label>菜单名称  </label> 
												<input id="resourceName" name="condition[resourceName|like]" type="text" placeholder="菜单名称">
											</li>
											<li>
												<label>链接  </label> 
												<input id="resourceName" name="condition[resourceLink|like]" type="text" placeholder="链接">
											</li>
											<li>
												<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
												<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
											</li>
										</ul>
									</div>
								</form>
							</div>
								
							<div class="btn-group-sm" id="toolbar" role="group">
						
								<!-- 
								<page:permission />	
								-->	
							
								<a class="btn btn-success" onclick="$.operate.add()">
									<i class="fa fa-plus"></i> 新增
								</a>
								<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
									<i class="far fa-trash-alt"></i> 删除
								</a>
								<a class="btn btn-danger" onclick="$.operate.clean()">
									<i class="fa fa-trash"></i> 清空
								</a>
								<a class="btn btn-warning" onclick="$.table.exportExcel()">
									<i class="fa fa-download"></i> 导出
								</a>
							</div>
							
							<div class="col-sm-12 select-table table-striped">
								<table id="bootstrap-table" data-mobile-responsive="true"></table>
							</div>
							
						</div>
					</div>
					<!-- /.col-->
				</div>
				<!-- /.row-->
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	
	<script type="text/javascript" th:src="@{/asserts/js/plugins/ztree/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/js/plugins/ztree/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/js/plugins/ztree/js/jquery.ztree.exedit.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/js/plugins/jquery.form.autofill/jquery.formautofill.js}"></script>
	
	<script type="text/javascript">
		var setting = {
			async : {
				enable : true,
				url: ctx+"boot/platform/application/menusData" 
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "resourceParent",
					rootPId : 0
				},
				key : {
					name : "resourceName"
				}
			},
			callback : {
				onClick : zTreeOnClick 
				// onAsyncSuccess : zTreeOnAsyncSuccess
			}
		};
	
		function zTreeOnClick(event, treeId, treeNode) {
			console.log("tree node id = " + treeNode.id) ; 
			$("input[id=selectResourceParentNode]").attr("data-id" ,treeNode.id) ; 
			$("input[id=resourceParent]").val(treeNode.id) ;
			$.table.search() ;
		};
	
		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodes();
			for (var i = 0; i < nodes.length; i++) { //设置节点展开
				treeObj.expandNode(nodes[i], true, true , true);
			}
		}
	
		$(document).ready(function() {
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
			treeObj.expandAll(true);
			
			var h = $(document).height()  ; 
			$("div.tree-card").css("height" , h) ; 
		});
	
		var detailFlag = "";
		var prefix = ctx + "monitor/operlog";

		$(function() {
		    var options = {
		        url: ctx+"boot/platform/menus/datatables" ,
		        createUrl: ctx + 'boot/platform/menus/add' ,
		        updateUrl: ctx+"boot/platform/menus/modify?id={id}" ,
		        statusUrl: ctx+"boot/platform/menus/changeStatus?id={id}" , 
		        cleanUrl: prefix + "/clean",
		        detailUrl: ctx+"boot/platform/menus/detail?id={id}",
		        removeUrl: ctx+"boot/platform/menus/delete" ,
		        exportUrl: prefix + "/export",
		        sortName: "operTime",
		        uniqueId:"id" ,
		        sortOrder: "desc",
		        modalName: "菜单图标",
		        escape: true,
		        showPageGo: true,
		        rememberSelected: true,
		        columns: [{field: 'state',checkbox: true },
		        	
			        {field: 'applicationIdLabel', title: '所属应用'},
			        {field: 'resourceIcon', title: '图标' , align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                actions.push('<i class="fa '+value+'" aria-hidden="true">');
			                return actions.join('');
			          }
			        },
			        {field: 'resourceName', title: '名称'},
			        {field: 'resourceLink', title: '菜单链接' , formatter:function(value , row , index){
			        	if(row.menuType == 3){ // 按钮标识
			        		return row.permission ; 	
			        	}else{
			        		return row.resourceLink ; 
			        	}
			        }},
			        {field: 'menuTypeLabel', title: '类型'},
			        {field: 'hasStatusLabel', title: '状态', align: 'center',  formatter:function(value,row,index){ return $.table.status(value , row);}},
			        {field: 'updateTime' , title: '操作',  align: 'right',  formatter: function(value, row, index) {
			                var actions = [];
			                
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editButton(\'' + row.id+ '\',\'' + row.resourceName+ '\')"><i class="fa fa-edit"></i>按钮</a> ');
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="far fa-trash-alt"></i>删除</a> ');
			                
			                return actions.join('');
			          }
			     }]
		    };
		    $.table.init(options);
		});

		// 编辑按钮 
		function editButton(_id , _name){
			$.modal.open("编辑【"+_name+"】按钮", ctx+"boot/platform/menus/buttons?menuId="+_id) ; 
		}
		
	</script>

</body>
</html>
